<template>
  <div>
    <el-dialog
        title="编辑义工信息"
        :visible.sync="editFlag"
        :before-close="handleClose"
        width="50%">
      <EditVolunteer></EditVolunteer>
    </el-dialog>

    <el-dialog
        title="添加义工"
        :visible.sync="addFlag"
        :before-close="handleClose"
        width="50%">
      <AddVolunteer></AddVolunteer>
    </el-dialog>

    <el-dialog
        title="修改图片"
        :visible.sync="photoFlag"
        :before-close="handleClose"
        width="40%">
      <VolunteerPhoto></VolunteerPhoto>
    </el-dialog>

    <el-dialog
        title="义工人脸采集"
        :visible.sync="faceFlag"
        :before-close="handleClose"
        width="60%">
      <FaceCollection></FaceCollection>
    </el-dialog>

    <div class = "Top">
      <el-form class="search bar7" onsubmit="return false">
        <input v-model="searchArea" type="text" placeholder="请输入您要搜索的姓名...">
        <button class="searchButton" @click="search()"></button>
      </el-form>
      <el-button type="success" style="margin-left:50px;width:65px;height:40px;" @click="addVolunteer()">添加</el-button>
    </div>

    <div class="userList">
      <!-- 用户管理列表 -->
      <el-table :data="volunteerList" border>
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column label="编号" align="center" prop="id" width="78" />
        <el-table-column label="姓名" align="center" prop="name" width="80" />
        <el-table-column label="性别" align="center" prop="gender" width="50" />
        <el-table-column label="电话" align="center" prop="phone" width="115" />
        <el-table-column label="身份证号" align="center" prop="idCard"  />
        <el-table-column label="描述" align="center" prop="description"  />
        <el-table-column label="生日" align="center" prop="birthday" width="115" />
        <el-table-column label="入院日期" align="center" prop="checkinDate" width="120" />
        <el-table-column label="离院日期" align="center" prop="checkoutDate" width="160"/>


        <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-key" @click="volunteerPhoto(scope.row)">头像</el-button>
            <el-button size="mini" type="text" icon="el-icon-video-camera" @click="collectFace(scope.row)">人脸采集</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-right: 80px; margin-top: 20px">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="totalVolunteer"
            @current-change="handleCurrentChange"
            style="float: right">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import EditVolunteer from "@/components/EditVolunteer";
import AddVolunteer from "@/components/AddVolunteer";
import VolunteerPhoto from "@/components/VolunteerPhoto";
import FaceCollection from "@/components/FaceCollection";

export default {
  name: "VolunteerManagement",
  components:{EditVolunteer,AddVolunteer,VolunteerPhoto,FaceCollection},
  data(){
    return {
      volunteerList: [],
      totalVolunteer: 20,
      pageNum: 1,
      pageSize: 10,
      searchArea:"",
      editFlag:false,
      addFlag:false,
      photoFlag:false,
      faceFlag:false,
      form: {
        "from":0,
        "num":10,
      },
    }
  },
  created() {
    if (this.$route.params.isReload == 'true') {
      this.$router.go(0);
    }
    this.getVolunteerList();
  },
  methods: {
    collectFace: function(row){
      localStorage.setItem('faceId',row.id)
      localStorage.setItem('faceType',"volunteer")
      this.faceFlag = true;
    },
    volunteerPhoto: function(row){
      localStorage.setItem('volunteerId',row.id);
      this.photoFlag = true;
    },
    handleCurrentChange: function (pageNum) {
      this.pageNum = pageNum;
      this.form.from = (pageNum-1)*10
      this.form.num = 10
      this.getVolunteerList();
    },
    search: function(){
      const _this = this;
      this.$axios.post('/volunteer/search', {"name":_this.searchArea}, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function (response) {
        // 这里是处理正确的回调
        _this.volunteerList= response.data.data;
        _this.pageSize = 100;
        _this.$message({
          message: '搜索成功！'+_this.searchArea,
          type: 'success'
        });
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    },
    getVolunteerList: function(){
      const _this = this;
      this.$axios.post('/volunteer/select', _this.form, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function (response) {
        // 这里是处理正确的回调
        _this.volunteerList= response.data.data;
        _this.pageSize = 10;
        _this.getTotalVolunteer();
        // _this.totalUser = response.data.data.total;
        // _this.pageNum = response.data.data.pageNum;
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    },
    getTotalVolunteer: function(){
      const _this = this;
      let formData = new FormData;
      this.$axios.post('/volunteer/count', formData, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function (response) {
        // 这里是处理正确的回调
        _this.totalVolunteer= response.data.data;
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    },
    handleClose(done) {
      done();
    },
    edit: function(row){
      localStorage.setItem('volunteerId',row.id);
      localStorage.setItem('volunteerName',row.name);
      localStorage.setItem('volunteerGender',row.gender);
      localStorage.setItem('volunteerPhone',row.phone);
      localStorage.setItem('volunteerIdCard',row.idCard);
      localStorage.setItem('volunteerBirthday',row.birthday);
      localStorage.setItem('volunteerCheckInDate',row.checkinDate);
      localStorage.setItem('volunteerCheckOutDate',row.checkoutDate);
      localStorage.setItem('volunteerImgsetDir',row.imgsetDir);
      localStorage.setItem('volunteerProfilePhoto',row.profilePhoto);
      localStorage.setItem('volunteerDescription',row.description);
      localStorage.setItem('volunteerUrl',row.profilePhoto);
      this.editFlag = true;
    },
    addVolunteer: function(){
      this.addFlag = true;
    },
    handleDelete: function(row){
      let _this = this;
      this.$axios.post('/volunteer/delete', {
        "id":row.id
      }, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function () {
        // 这里是处理正确的回调
        _this.$message({
          message: '删除成功！',
          type: 'success'
        });
        _this.$router.go(0);
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    },
  }
}
</script>

<style scoped>
.Top{
  margin-top: 10px;
  margin-bottom: 10px;
}

.userList{
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #494A5F;
  font-weight: 500;
  font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}

div.search {padding: 20px 0;}

form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

input, button {
  border: none;
  outline: none;
}

input {
  width: 100%;
  height: 42px;
  padding-left: 13px;
}

.searchButton {
  height: 42px;
  width: 42px;
  cursor: pointer;
  position: absolute;
}


/*搜索框7*/
.bar7 {background: #fff;}
.bar7 form {
  height: 20px;
}
.bar7 input {
  width: 250px;
  border-radius: 42px;
  border: 2px solid #324B4E;
  background: #F9F0DA;
  transition: .3s linear;
  float: right;
}
.bar7 input:focus {
  width: 300px;
}
.bar7 button {
  background: none;
  top: -2px;
  right: 0;
}
.bar7 button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}
</style>

<style src="../font-awesome-4.7.0/css/font-awesome.min.css">
</style>


